﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IGoogleHomePageCustom.aspx.cs" Inherits="JQueryWidget.JQueryWeb.IGoogleHomePageCustom" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .widgetStore
    {
    }
    .column
    {
        margin:0px 0px 0px 0px;
        width:33%;
        display:block;
        float:left;
        position:relative; 
        height:800px;
    }
    .modbox
    {
        margin:0px 0px 0px 0px;
    }
    .widget
    { 
        border:1px solid gray;
        margin-top:10px;
    }
    .widget_header
    {
        background-color:lightblue;
    }
    .widget_body
    {
    }
    .widget_footer
    {
    }
    
    .draggable
    {
    }
    .droppable
    {
    }
    .widgetholder
    {
        border:2px dashed gray;
        display:none;
        position:relative;
        margin-top:10px;
    }
    </style>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-ui.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="widgetStore">
        <div class="column droppable">
            <div class="widget draggable">
                <div class="widget_header">
                    Calendar
                </div>
                <div class="widget_body">
                    Calendar 1
                </div>
                <div class="widget_footer">
                </div>
            </div> 
            
            <div class="widget draggable">
                <div class="widget_header">
                    News
                </div>
                <div class="widget_body">
                    <a href="#">a good new from US.</a>
                </div>
                <div class="widget_footer">
                </div>
            </div>
             
        </div>
        <div class="column droppable">
            <div class="widget draggable">
                <div class="widget_header">
                    Calendar2
                </div>
                <div class="widget_body">
                    Calendar 2
                </div>
                <div class="widget_footer">
                </div>
            </div> 
            
            <div class="widget draggable">
                <div class="widget_header">
                    News2
                </div>
                <div class="widget_body">
                    <a href="#">a good new from US.</a>
                </div>
                <div class="widget_footer">
                </div>
            </div>
             
        </div>
        <div class="column droppable">
         
        </div>
    </div>
    <div class="widgetholder">
        widgetholder
    </div>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var draggableOptions = {
                containment: "widgetStore",
                revert: true,
                opacity: 0.5 
            };
            $(".draggable").draggable(draggableOptions);

            $(".droppable").droppable({
                tolerance: "intersect",
                over: function (event, ui) {
                    showWidgetHolder($(this), $(ui.draggable));
                },
                out: function (event, ui) {
                    hideWidgetHolder($(this), $(ui.draggable));
                },
                drop: function (event, ui) {
                    hideWidgetHolder($(this), $(ui.draggable));
                    var offset = $(ui.draggable).offset();
                    if ($(".widgetholder").css("display") == "block") {
                        $(ui.draggable).remove();
                        var clone = $(".widgetholder").clone();
                        $(".widgetholder").replaceWith($(ui.draggable));
                        $(ui.draggable).css("opacity", 1)
                                   .offset(offset)
                                   .draggable(draggableOptions);
                        clone.appendTo($(document.body)).css("display", "none");
                    }
                }
            });
        });

        var widgetHolderInfo = {
            column: null,
            index: -1
        };
        function showWidgetHolder(droppable, draggable) {
            var offset = $(draggable).offset();
            
            var childrenLen = $(droppable).children(".widget").length;
            var wrappedIndex = -1;
            if (childrenLen == 0) {
                wrappedIndex = 0;
            }
            else {
                $(droppable).children(".widget")
                            .each(function (i, n) {
                                var offsetOfn = $(n).offset();
                                var heightOfn = $(n).height();
                                if (offsetOfn.top <= offset.top && offset.top <= offsetOfn.top + heightOfn) {
                                    wrappedIndex = offset.top > (offsetOfn.top + heightOfn / 2) ? i + 1 : i;
                                    return;
                                }
                            });
                }
                if (wrappedIndex < 0) {
                    if (childrenLen > 0) {
                        wrappedIndex = (offset.top < $(droppable).children(".widget:first-child").offset().top) ? 0 : childrenLen;
                    }
                    else {
                        wrappedIndex = 0;
                    }
                }

                if (widgetHolderInfo.column == $(droppable)[0] && widgetHolderInfo.index == wrappedIndex) {
                    $(".widgetholder").css("display", "block");
                    return;
                }
                else {
                    widgetHolderInfo.column = $(droppable)[0];
                    widgetHolderInfo.index = wrappedIndex;
                }

                if (wrappedIndex == 0) {
                    $(".widgetholder").remove().prependTo($(droppable));
                }
                else {
                    $(".widgetholder").remove().insertAfter($(droppable).children(".widget:nth-child(" + (wrappedIndex) + ")"));
                }

                var dropIsParent = ($(droppable)[0] == $(draggable).parent()[0]); 
                if (dropIsParent) {
                    $(".widgetholder").css("position", "absolute")                                  
                }
                else {               
                    $(".widgetholder").css("position", "relative") 
                }
                $(".widgetholder").css("display", "block")
                                .height($(draggable).height())
                                .width($(draggable).width());
        }

        function hideWidgetHolder(droppable, draggable) {
            //$(droppable).children(".widgetholder").css("display", "none");
            widgetHolderInfo = {
                column: null,
                index: -1
            };
        } 


    </script>
    </form>
</body>
</html>
